<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <div class="grid-content-top">
            <div class="grid-content-title" style="">
              <div>获取数据</div>
              <el-tag type="success">实时</el-tag>
            </div>
          </div>
          <div class="grid-content-bottom" style="">
            <div class="grid-content-item" style="">
              <div style="font-size: 1.5rem;">1</div>
              <div style="font-size: 40px;">
                <el-icon>
                  <Tickets />
                </el-icon>
              </div>
            </div>
            <div class="grid-content-items" style="">
              <div>时长</div>
              <div>1s</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <div class="grid-content-top">
            <div class="grid-content-title" style="">
              <div>获取数据</div>
              <el-tag>月</el-tag>
            </div>
          </div>
          <div class="grid-content-bottom" style="">
            <div class="grid-content-item" style="">
              <div style="font-size: 1.5rem;">1</div>
              <div style="font-size: 40px;">
                <el-icon>
                  <Tickets />
                </el-icon>
              </div>
            </div>
            <div class="grid-content-items" style="">
              <div>222</div>
              <div>333</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <div class="grid-content-top">
            <div class="grid-content-title" style="">
              <div>获取数据</div>
              <el-tag type="warning">月</el-tag>
            </div>
          </div>
          <div class="grid-content-bottom" style="">
            <div class="grid-content-item" style="">
              <div style="font-size: 1.5rem;">1</div>
              <div style="font-size: 40px;">
                <el-icon>
                  <Tickets />
                </el-icon>
              </div>
            </div>
            <div class="grid-content-items" style="">
              <div>222</div>
              <div>333</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <div class="grid-content-top">
            <div class="grid-content-title" style="">
              <div>获取数据</div>
              <el-tag type="info">月</el-tag>
            </div>
          </div>
          <div class="grid-content-bottom" style="">
            <div class="grid-content-item" style="">
              <div style="font-size: 1.5rem;">1</div>
              <div style="font-size: 40px;">
                <el-icon>
                  <Tickets />
                </el-icon>
              </div>
            </div>
            <div class="grid-content-items" style="">
              <div>222</div>
              <div>333</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card>
          <template #header>
            <Monitor style="width: 1em; height: 1em; vertical-align: middle;" /> <span
              style="vertical-align: middle;">历史数据分析</span>
          </template>
          <el-date-picker v-model="echartsTime" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
            is-range value-format="YYYY-MM-DD" range-separator="至" placeholder="选择签约时间" :shortcuts="pickerOptions"
            unlink-panels />
          <div ref="analysisIntance" style="height: 300px" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card>
          <template #header>
            <Monitor style="width: 1em; height: 1em; vertical-align: middle;" /> <span
              style="vertical-align: middle;">实时数据分析</span>
          </template>
          <Table :table-data="TableData" :border="true" table-height="350" size="small" :loading="Loading"
            :columns="Columns" :is-pagination="false" :selection="false" :show-index="true">
            <template #status="scope">
              <div>
                <dict-tag :options="data_read" :value="scope.row.status" />
              </div>
            </template>
            <template #action="scope">
              <div>
                <el-button size="small" link type="primary" icon="Delete"
                  @click="handleTransferDelete(index)">移除</el-button>
              </div>
            </template>
          </Table>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-divider /> -->
  </div>
</template>

<script setup name="Index">
  import * as echarts from 'echarts'
  import { getIndexStatistics } from "@/api/home/index"
  const analysisIntance = ref()
  const Loading = ref(false)
  const TableData = ref([])
  const echartsTime = ref([])
  const pickerOptions = ref([
    {
      text: '今天',
      value: () => {
        let start = new Date()
        let end = new Date()
        start.setHours(0, 0, 0)
        end.setHours(23, 59, 59)
        return [start, end]
      },
    },
    {
      text: '昨天',
      value: () => {
        let start = new Date()
        let end = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24)
        end.setTime(end.getTime() - 3600 * 1000 * 24)
        start.setHours(0, 0, 0)
        end.setHours(23, 59, 59)
        return [start, end]
      },
    },
    {
      text: "本周",
      value: () => {
        var end = new Date()
        var week = end.getDay()
        //一天的毫秒数
        var millisecond = 1000 * 60 * 60 * 24
        //减去的天数
        var minusDay = week != 0 ? week - 1 : 6
        //本周 周一
        var monday = new Date(end.getTime() - minusDay * millisecond)
        const start = new Date(monday)
        start.setHours(0, 0, 0, 0)
        return [start, end]
      },
    },
    {
      text: "上周",
      value: () => {
        // 上周开始时间
        const starta = new Date()
        var first = starta.getDate() - starta.getDay() - 6
        var startDate = new Date(starta.setDate(first))
        const start = new Date(startDate)
        start.setHours(0, 0, 0, 0)
        //  上周结束时间
        var currentDate = new Date()
        var firsts = currentDate.getDate() - currentDate.getDay() - 6
        var last = firsts + 6
        var endDate = new Date(currentDate.setDate(last))
        const end = new Date(endDate)
        return [start, end]
      },
    },
    {
      text: '近15天',
      value: () => {
        let start = new Date()
        let end = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
        end.setTime(end.getTime() - 3600 * 1000 * 24)
        start.setHours(0, 0, 0)
        end.setHours(23, 59, 59)
        return [start, end]
      },
    },
    {
      text: '近30天',
      value: () => {
        let start = new Date()
        let end = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        end.setTime(end.getTime() - 3600 * 1000 * 24)
        start.setHours(0, 0, 0)
        end.setHours(23, 59, 59)
        return [start, end]
      },
    },
    {
      text: '近3月',
      value: () => {
        let start = new Date()
        let end = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        end.setTime(end.getTime() - 3600 * 1000 * 24)
        start.setHours(0, 0, 0)
        end.setHours(23, 59, 59)
        return [start, end]
      },
    },
  ]
  )
  const Columns = ref([
    {
      prop: 'classificationName',
      label: '用户',
      slot: '',
      minWidth: 150,
      align: 'center',
      showOverflowTooltip: false,
    },
    {
      prop: 'title',
      label: '分类名称',
      slot: '',
      minWidth: 150,
      align: 'center',
      showOverflowTooltip: false,
    },
    {
      prop: 'notReadCount',
      label: '未读数量',
      slot: '',
      minWidth: 150,
      align: 'center',
      showOverflowTooltip: false,
    },
    {
      prop: 'readCount',
      label: '已读数量',
      slot: '',
      minWidth: 150,
      align: 'center',
      showOverflowTooltip: false,
    },
    {
      prop: 'redisReadCount',
      label: '已缓存数量',
      slot: '',
      minWidth: 150,
      align: 'center',
      showOverflowTooltip: false,
    },
    {
      prop: 'total',
      label: '合计',
      slot: '',
      minWidth: 150,
      align: 'center',
      showOverflowTooltip: false,
    },
  ])
  const getIndexStatisticsApi = () => {
    getIndexStatistics().then(response => {
      let list = response.data
      if (list.length > 0) {
        list.forEach((item) => {
          item.notReadCount = item.notReadCount ? item.notReadCount : 0
          item.readCount = item.readCount ? item.readCount : 0
          item.redisReadCount = item.redisReadCount ? item.redisReadCount : 0
          item.total = item.notReadCount + item.readCount + item.redisReadCount
        })
      }
      // console.log(list, 'ABCDEFG-getIndexStatistics')
      TableData.value = list || []
    }).catch(() => {
    })
  }
  const getAnalysis = () => {
    // console.log(analysisIntance.value, 'ABCDEFG-123')
    let analysisEcharts = echarts.init(analysisIntance.value)
    const option = {
      color: ['#80FFA5', '#00DDFF', '#37A2FF'],
      // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
      title: {
        // text: 'Gradient Stacked Area Chart'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['未读数量', '已读数量', '数据创建数量（按小时）']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '1%',
        right: '1%',
        bottom: '1%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '未读数量',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          // label: {
          //   show: true,
          //   position: 'top'
          // },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(128, 255, 165)'
              },
              {
                offset: 1,
                color: 'rgb(1, 191, 236)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [140, 232, 101, 264, 90, 340, 250]
        },
        {
          name: '已读数量',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          // label: {
          //   show: true,
          //   position: 'top'
          // },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(0, 221, 255)'
              },
              {
                offset: 1,
                color: 'rgb(77, 119, 255)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [120, 282, 111, 234, 220, 340, 310]
        },
        {
          name: '数据创建数量（按小时）',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          // label: {
          //   show: true,
          //   position: 'top'
          // },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(55, 162, 255)'
              },
              {
                offset: 1,
                color: 'rgb(116, 21, 219)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [320, 132, 201, 334, 190, 130, 220]
        },
      ]
    }
    // console.log(option, 'option');
    option && analysisEcharts.setOption(option)
    // window.addEventListener("resize", function () {
    //   analysisIntance.resize()
    // });
  }
  const getEchartsTime = () => {
    // 获取昨天日期
    const yesterday = new Date()
    yesterday.setDate(yesterday.getDate() - 1)
    const yesterdayDate = yesterday.toISOString().split('T')[0]
    // console.log(yesterdayDate, '获取昨天日期')
    // 获取今天日期
    const today = new Date()
    const todayDate = today.toISOString().split('T')[0]
    // console.log(todayDate, '获取今天日期')

    echartsTime.value = [yesterdayDate, todayDate]
  }
  // const echartsTimeChange = (e) => {
  //   console.log(e, 'echartsTimeChange')
  // }
  getEchartsTime()
  // getToday()
  onMounted(() => {
    // console.log(commandstats.value, 'ABCDEFG-456')
    getIndexStatisticsApi()
    getAnalysis()
  })
</script>

<style scoped lang="scss">
  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 150px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    /* background: yellowgreen; */
    /* padding: 12px; */
  }

  .grid-content-top {
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: 56px;
    margin-bottom: -1px;
    padding: 0 24px;
    color: rgba(0, 0, 0, 0.88);
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 8px 8px 0 0;
  }

  .grid-content-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .grid-content-bottom {
    padding: 12px;
  }

  .grid-content-item {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    align-items:
      center;
    justify-content: space-between;
  }

  .grid-content-items {
    padding: 0.5rem;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    justify-content: space-between;
  }
</style>
